<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选项卡切换</title>
  <style>
    /* 选项卡容器样式 */
   .tab-container {
      display: flex;
    }
    /* 单个选项卡样式 */
   .tab {
      padding: 10px 20px;
      background-color: #ccc;
      cursor: pointer;
    }
    /* 选中选项卡样式 */
   .tab.active {
      background-color: #aaaaff;
    }
    /* 内容区域样式 */
   .content {
      width: 300px;
      height: 200px;
      background-color: #aaaaff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="tab-container">
    <div class="tab" id="tab1" onclick="changeTab(0)">tab01</div>
    <div class="tab" id="tab2" onclick="changeTab(1)">tab02</div>
    <div class="tab" id="tab3" onclick="changeTab(2)">tab03</div>
  </div>
  <div class="content" id="content1">tab文字内容一</div>
  <div class="content" id="content2" style="display: none;">tab文字内容二</div>
  <div class="content" id="content3" style="display: none;">tab文字内容三</div>

  <script>
    function changeTab(index) {
      const tabs = document.querySelectorAll('.tab');
      const contents = document.querySelectorAll('.content');
      // 移除所有选项卡的激活样式
      tabs.forEach(tab => tab.classList.remove('active'));
      // 给当前点击的选项卡添加激活样式
      tabs[index].classList.add('active');
      // 隐藏所有内容区域
      contents.forEach(content => content.style.display = 'none');
      // 显示对应索引的内容区域
      contents[index].style.display = 'block';
    }
  </script>
</body>

</html>